<template>
  <div class="nav">
    <ul>
      <li class="flex-space-between" :class="currentNavItem === item[filedValue] ? 'item-active' : ''" v-for="item in itemList" :key="item.id" @dblclick="dblclick(item)" @click="click(item)">
        <div :class="['prefix-box', isUseEllipsis ? 'ellipsis' : '']" :title="isUseEllipsis ? item[filedLabel] : ''">
          <span v-if="prefixIcon || item.prefix" :class="currentNavItem === item.component ? 'icon-' + item.icon + '-active' : 'icon-' + prefixIcon" class="iconfontShuzhi"></span>
          <span class="item-title"> {{ item[filedLabel] }} </span>
        </div>
        <div :class="['suffix-box', suffixInitShow ? '' : 'suffix-init-show', diyColor ? 'diy-color' : '']" v-if="suffixIcon || item.suffix">
          <span :class="currentNavItem === item.component ? 'icon-' + item.icon + '-active' : 'icon-' + suffixIcon" class="iconfontShuzhi"></span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    itemList: {
      type: Array,
      require: true
    },
    prefixIcon: {
      type: String,
      default: ''
    },
    suffixIcon: '',
    filedLabel: {
      type: String,
      default: 'label'
    },
    // 初始状态是否隐藏后缀图标
    suffixInitShow: {
      type: Boolean,
      default: true
    },
    // 是否切换后缀图片颜色
    diyColor: {
      type: Boolean,
      default: false
    },
    // 是否允许切换的时候改变样式
    isAllowSetCurrent: {
      type: Boolean,
      default: false
    },
    filedValue: {
      type: String,
      default: 'value'
    },
    // 是否启用省略号
    isUseEllipsis: {
      type: Boolean,
      default: true
    },
    // 当前选择
    current: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentNavItem: ''
    }
  },
  created() {

  },
  watch: {
    current: {
      immediate: true,
      deep: true,
      handler() {
        if (this.current) {
          this.currentNavItem = this.current
        }
      }
    }
  },
  methods: {
    dblclick(item) {
      this.$emit('dblclick', item)
    },
    click(item) {
      this.isAllowSetCurrent && this.setCurrent(item[this.filedValue])
      this.$emit('onClick', item)
    },
    setCurrent(val) {
      this.currentNavItem = val
    }
  },
  components: {},
}
</script>

<style lang='less' scoped>
@import url("@/common/colors");
@gradient-angle: 270deg;
@gradient-start: rgba(48, 158, 255, 0);
@gradient-end: rgba(48, 158, 255, 0.47);
@transition-duration: 0.5s;

.nav {
  width: 100%;
  height: 230px;
  overflow: auto;

  ul {
    width: 100%;
    transform: all s all;

    li {
      display: flex;
      align-items: center;
      transition: background @transition-duration ease;
      cursor: pointer;
      padding: 3px 10px;
      text-align: left;

      &:hover {
        background: linear-gradient(@gradient-angle,
            @gradient-start 4%,
            @gradient-end 100%);
        background-color: rgba(53, 168, 235, 0.12);
        color: @primary;
      }

      .item-title {
        width: 60px;
      }

      .prefix-box.ellipsis {
        display: inline-block;
        width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .suffix-box.suffix-init-show span {
      display: none;
    }

    .item-active {
      background: linear-gradient(@gradient-angle,
          @gradient-start 4%,
          @gradient-end 100%);
      // background-color: rgba(53, 168, 235, 0.12);
      color: @primary;

      .suffix-box span {
        display: inline-block;
      }

      .diy-color span {
        background-image: linear-gradient(to right, #30dcff00, #30DCFF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: 22px;
        line-height: 1;
        vertical-align: middle;
      }
    }
  }
}</style>